<template>
    <div>
        <header>
            <div class="explain">
                <h1>前端学习笔记</h1>
                <h5>学习弯道超车技术</h5>
            </div>
        </header>
        <webList ref="webList" />
    </div>
</template>

<script>
import webList from '@/view/index/components/webList'
export default {
    name: 'index',
    components: {
        webList,
    },
    data() {
        return {
            searchVal: sessionStorage.getItem('searchVal'),
        }
    },
    watch: {
        searchVal(n, o) {
            console.log(n, o)
            this.$refs.webList.getList(sessionStorage.getItem('searchVal'))
            sessionStorage.removeItem('searchVal')
        },
    },
    mounted() {
        this.$refs.webList.getList()
    },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
